<template>
  <div class="m-navigation-bar-item" :class="{'bar-item__active': active}">
    <Badge :value="item.badge">
      <div class="icon" :class="item.icon" :style="{ color: active ? item.activeColor : item.color }"></div>
    </Badge>
    <p :style="{ color: active ? item.activeColor : item.color }">{{ item.title }}</p>
  </div>
</template>

<script>
import Badge from '../Badge';

export default {
  components: { Badge },
  props: {
    item: {
      type: Object,
      required: true
    },
    active: {
      type: Boolean,
    }
  }
};
</script>

<style lang="scss">
.m-navigation-bar-item {
  flex: 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  cursor: pointer;
  //cursor: pointer;
  .icon {
    font-size: 2.2rem;
  }
  >p {
    font-size: 1rem;
  }
  &.bar-item__active {
    cursor: default;
  }
}
</style>